<template>
	<view class="myOrders">
		<view class="tab-box">
			<view class="tab-box__item" v-for="(item,index) in tabList" :key="index" @click="tabBtn(item.type)">
				<view class="name" :class="currType==item.type?'txt-col':''">{{item.name}}</view>
				<view :class="currType==item.type?'active':''"></view>
			</view>
		</view>
		<view class="list-box" v-if="list.length > 0">
			<view class="list-box__item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
				<view class="item-top">
					<view class="item-top__serial">订单编号：{{item.orderNo}}</view>
					<view class="item-top__status">{{item.terminalOrderStatus | explainStatus}}</view>
				</view>
				<view class="item-content">
					<image class="image" :src="item.imgUrl"></image>
					<view class="title">
						<view class="title-main">{{item.goodsName}}</view>
						<view class="title-sub">{{item.brandName}}</view>
					</view>
					<view class="subtotal">
						<view class="subtotal-price">￥{{item.price}}</view>
						<view class="subtotal-unite">X{{item.quantity}}</view>
					</view>
				</view>
				<view class="item-payment">
					<text class="item-payment__coupon">总价￥{{item.orderAmount}}, 优惠￥{{item.touchMoney}}</text>
					<text class="item-payment__total">实付款￥{{item.realPay}}</text>
				</view>
				<view class="item-buttons">
					<view class="order-btn" @click.stop="orderDelete(item, index)" v-if="item.terminalOrderStatus == 'PAYING'">删除订单</view>
					<view class="order-btn order-btn-orange" @click.stop="pay(item)" v-if="item.terminalOrderStatus == 'PAYING'">立即付款</view>
					<view class="order-btn" @click.stop="orderNotice(item)" v-if="item.terminalOrderStatus == 'WAITING' || item.terminalOrderStatus == 'CONFIRM' || item.terminalOrderStatus == 'WAITING_SEND'">提醒发货</view>
					<view class="order-btn order-btn-orange" @click.stop="orderConfirm(item)" v-if="item.terminalOrderStatus == 'SEND_OUT'">确认收货</view>
					<view class="order-btn order-btn-orange" @click.stop="orderReply(item)" v-if="item.terminalOrderStatus == 'SIGNED_IN' || item.terminalOrderStatus == 'OFFLINE_DEAL'">评价</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
		<u-modal v-model="confirmShow" :content="confirmContent" @confirm="confirm"></u-modal>
		
		<u-popup v-model="buyBox" mode="bottom" border-radius="40">
			<view class="goods-buy">
				<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/CoNFXgIOmf_open_icon.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
				<view class="pay-total">￥{{buyTerminal.realPay}}</view>
				<view class="num-box">
					<view class="label-gray">付款方式</view>
					<view class="">{{buyTerminal.payType=='WX' ? '微信' : '未知'}}</view>
				</view>
				<view class="complete">
					<button class="btn" @click="goPay">立即支付</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { submitAgainApi, orderSearchApi, editStatusApi, orderDeleteApi } from "@/api/orders.js"
	export default {
		data() {
			return {
				endDate:null,
				tabList:[
					{name:"全部",type:""},
					{name:"待付款",type:"PAYING"},
					{name:"待发货",type:"WAITING,CONFIRM,WAITING_SEND"}, // 待确认,已接单,待发货
					{name:"待收货",type:"SEND_OUT"}, // 已发货
					{name:"待评价",type:"SIGNED_IN,OFFLINE_DEAL"} // 已签收
				],
				currType:"",
				pageIndex:0,
				pageSize:30,
				list:[],
				total:1,
				confirmShow: false,
				confirmTitle: '一经确认，无法修改',
				confirmContent: '请确定收到商品？',
				confirmItem: {
					id: 0
				},
				buyBox: false,
				buyTerminal: {}
			}
		},
		onLoad(options) {
			this.currType = options.type
			this.getOrderList()
		},
		// 上拉加载更多
		onReachBottom() {
			this.getOrderList()
		},
		filters: {
			explainStatus(value) {
				const statusList = {
					PAYING: '待付款',
					WAITING: '待发货',
					CONFIRM: '待发货',
					SEND_OUT: '待收货',
				}
				return statusList[value]
			}
		},
		methods: {
			// 获取列表
			async getOrderList(){
				if(this.list.length >= this.total) return
				let params ={
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				}
				if(this.currType != '') {
					params.status = this.currType
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await orderSearchApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					const data = res.data.data.rows
					this.list = [...this.list, ...data]
					this.total = res.data.data.total
					this.pageIndex++
				}
			},
			// 返回上一页
			previous() {
				uni.switchTab({
					url:"/pages/main/homePages"
				})
			},
			// 订单详情页
			goDetail(item){
				let id = item.id
				uni.navigateTo({
					url: `/pages/my/orderDetail?id=${id}`
				})
			},
			// tab切换
			tabBtn(item) {
				this.currType = item
				this.restData()
			},
			restData(){
				this.list = []
				this.pageIndex = 0
				this.total = 1
				this.getOrderList()
			},
			// 确认收货
			orderConfirm(item) {
				this.confirmItem = item
				this.confirmShow = true
			},
			async confirm() {
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await editStatusApi(this.confirmItem.id, {terminalOrderStatus: 'SIGNED_IN'})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.confirmItem.terminalOrderStatus = 'SIGNED_IN'
				} else {
					uni.showToast({
						title:'操作失败',
						icon:"none"
					})
				}
			},
			async orderDelete(item, index) {
				let _this = this
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await orderDeleteApi(item.id)
				if(res.statusCode === 200){
					uni.hideLoading()
					uni.showToast({
						title:'删除成功',
						icon:"none",
						success() {
							setTimeout(()=>{
								_this.restData()
							},1000)
						}
					})
					// this.list.slice(index, 1)
				} else {
					uni.showToast({
						title:'删除失败',
						icon:"none"
					})
				}
			},
			pay(item) {
				this.buyBox = true
				this.buyTerminal = item
				return false
			},
			async goPay() {
				const self = this
				try{
					let params = {
						applicationType:'APPLET',
						id:this.buyTerminal.id,
					}
					uni.showLoading({
						title:"正在加载中...."
					})
					const res = await submitAgainApi(params)
					if(res.statusCode ==200){
						uni.hideLoading()
						
						uni.showLoading({
							title:"支付中...."
						})
						wx.requestPayment({
							  timeStamp: res.data.data.timeStamp,
							  nonceStr: res.data.data.nonceStr,
							  package: res.data.data.package,
							  signType: 'MD5',
							  paySign: res.data.data.sign,
							  success:(r)=>{
								 uni.hideLoading() 
								 uni.showToast({
								 	title:"支付成功!",
								 	icon:"success"
								 })
								 self.buyTerminal.terminalOrderStatus = "WAITING"
							  },
							  fail:(res)=>{
								  uni.hideLoading()
								    if(res.errMsg.indexOf("cancel") > -1){
										uni.showToast({
											title:"已取消支付!",
											icon:"none"
										})
									}else{
										uni.showToast({
											title:"支付失败，请重新支付！",
											icon:"none"
										})
									}
							  }
						})
					}
				}catch(e){
					console.log(e)
					uni.showToast({
						title:"支付失败，请重新支付！",
						icon:"none"
					})
					uni.hideLoading()
				}
			},
			orderReply(item) {
				this.unOpen()
			},
			orderNotice(item) {
				this.unOpen()
			},
			unOpen() {
				uni.showToast({
					title:'暂未开放',
					icon:"none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myOrders {
		background: #F7F7F7;
		padding-bottom: 52rpx;
		.tab-box {
			background: #FFFFFF;
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #F7F7F7;
			border-bottom: 1rpx solid #F7F7F7;
			
			
				&__item {
					flex: 1;
					flex-wrap: wrap;
					justify-content: center;
					.name {
						text-align: center;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
					}
					.txt-col{
						color: #F05329;
						font-weight: bold;
					}
					.active {
						background: #F05329;
						font-weight: bold;
					}
				}
			
		}
		.list-box {
			padding: 0 30rpx;
			&__item {
				background: #FFFFFF;
				margin-top: 20rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 30rpx;
				.item-top {
					position: relative;
					&__serial {
						padding-right: 80rpx;
						font-size: 24rpx;
					}
					&__status {
						position: absolute;
						right: 0;
						top: 0;
						font-size: 24rpx;
						color: #F16240;
					}
				}
				.item-content {
					display: flex;
					margin-top: 38rpx;
					.image {
						height: 180rpx;
						width: 180rpx;
						margin-right: 20rpx;
					}
					.title {
						flex: 1;
						&-main {
							font-size: 30rpx;
							color: #010101;
						}
						&-sub {
							font-size: 24rpx;
							color: #999999;
							margin-top: 29rpx;
						}
					}
					.subtotal {
						min-width: 160rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
						&-price {
							font-size: 28rpx;
							text-align: right;
							color: #666666;
						}
						&-unite {
							font-size: 24rpx;
							color: #999999;
							margin-top: 32rpx;
							text-align: right;
						}
					}
				}
				.item-payment {
					margin-top: 40rpx;
					text-align: right;
					font-size: 26rpx;
					&__coupon {
						color: #999999;
						font-size: 26rpx;
						margin-right: 30rpx;
					}
					&__total {
						color: #000;
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
			.item-buttons {
				margin-top: 39rpx;
				text-align: right;
				.order-btn {
					border: 1rpx solid #999999;
					padding: 16rpx 32rpx;
					font-size: 28rpx;
					color: #666666;
					text-align: center;
					line-height: 28rpx;
					border-radius: 30rpx;
					display: inline-block;
					margin-left: 20rpx;
					&-orange {
						color: #F16240;
						border-color: #F16240;
					}
				}
			}
			
		}
		.goods-buy{
			width: 100%;
			height: 680rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0;
			.pay-total {
				text-align: center;
				font-size: 45rpx;
				font-weight: bold;
				margin-top: 43rpx;
			}
			.num-box{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 34rpx;
				.label-gray {
					color: #999999;
				}
			}
			.complete {
				margin-top: 140rpx;
			}
			.btn {
				background: #F05329;
				border: none;
				border-radius: 10rpx;
				color: #fff;
				line-height: 80rpx;
			}
		}
	}
</style>
